import './index.css'

import { useState } from "react";

/* 
hooks函数
useState : 
  向组件中添加一个状态变量 (实质上是响应式数据) 数据会驱动视图
  和普通变量相比 状态变量一旦发送变化 视图UI也会发生变化
  使用: 返回一个数组, 第一个参数是状态变量, 第二个参数是set函数 用来修改状态变量. useState的参数就是状态变量的初始值

*/

function App() {
  const [count, setCount] = useState(0);

  const [obj , setObj] = useState({
    name:'ts'
  })


  // 点击事件函数
  const clickFn = () => {
    // count++ 
    // console.log(count); // 通过打印发现 其实值是修改了的
    // 在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

    // 正确的方法: 使用set函数
    // set函数作用: 
    // 传入的新值修改count
    // 新值会驱动视图更新
    setCount(count+1);
  };

  const changeObj = () => {
    // obj.name = 'TS'
    // 正确写法 使用新对象 替换老对象 
    // 加上 ...obj 代表只替换obj的name属性
    setObj({
      ...obj,
      name:'TS'
    })
  }



  return (
    <div className="red">
      {'测试样式'}
      <button onClick={clickFn}>{count} </button>


      <button onClick={changeObj}>{obj.name} </button>

    </div>
  );
}

export default App;
